// vscode命令cgthjs自动生成./static/mixin/getTableHeight.js
import { mapGetters } from "vuex";
const mixin = {
  data() {
    return {
      listInfo: {
        addedHeight: 85,
        tableHeight: 0 // 表格最大高度
      },
      options: {
        isMobile: false,
        isAndroid: false,
        isIpad: false
      }
    };
  },
  // watch: {
  //   fullScreen() {
  //     this.listInfo.tableHeight = this.getTableHeight();
  //   }
  // },
  // computed: {
  //   ...mapGetters(["fullScreen"])
  // },
  mounted() {
    this.setClient();
    this.listInfo.tableHeight = this.getTableHeight();
    window.addEventListener("resize", () => {
      // 最后赋值给页面的高度
      this.listInfo.tableHeight = this.getTableHeight();
    });
  },
  methods: {
    updateTableHeight(height) {
      this.listInfo.addedHeight = height;
      this.listInfo.tableHeight = this.getTableHeight();
    },
    initHeight() {
      this.updateHeight(85);
    },
    // 判断客户端
    setClient() {
      if (
        navigator.userAgent.match(
          /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        this.options.isMobile = true;
        if (navigator.userAgent.match(/(iPad)/i)) {
          this.options.isIpad = true;
        } else if (navigator.userAgent.match(/(Android)/i)) {
          this.options.isAndroid = true;
        }
      }
    },
    detectOrient() {
      if (Math.abs(window.orientation) === 90) {
        // 横屏
        this.options.isRote = true;
      } else {
        // 竖屏
        this.options.isRote = false;
      }
    },
    getTargetClass() {
      // 获取目标类名
      // 兼容element表格和原生表格,如需在其他原生表格使用则需要添加类名 .en-table
      const els = ["el-table", "en-table"];
      for (const _ of els) {
        const currDom = document.getElementsByClassName(_);
        if (currDom.length !== 0) return _;
      }
      return "";
    },
    getTableHeight() {
      // 当表格存在的时候才执行操作
      const targetClassName = this.getTargetClass();
      if (targetClassName === "") return;
      const zoom = document.body.style.zoom || 1;
      // 页面总视图高度
      const boxH = document.body.clientHeight;
      // 头部高度
      const Header = document.getElementsByClassName("Header")[0]
        ? document.getElementsByClassName("Header")[0].clientHeight + zoom * 10
        : zoom * 10;
      // 导航条高度
      let arrowBars = 0;
      if (window.top === window.parent) {
        // 只有一层iframe嵌套（vue打包源码嵌入dsp）
        // arrowBars += 44;
      } else if (window.self !== window.top) {
        //存在多层iframe嵌套（vue打包源码嵌入dsp再嵌入dpt）
        // arrowBars = 38 + 63;
      }
      // 页面底部高度
      const Footer = document.getElementsByClassName("Footer")[0]
        ? document.getElementsByClassName("Footer")[0].clientHeight
        : 0;
      const pagination = document.getElementsByClassName("paginationContainer")[0] || {
        clientHeight: 0
      };
      const pagerH = (pagination.clientHeight || 0) * 2;
      const tab = document.getElementsByClassName(`${targetClassName}`)[0] || {
        offsetTop: 0
      };
      // table顶部距离
      const tabOffT = tab.offsetTop + zoom * 20; // +20是admin的margin
      console.log(" boxH：" + boxH + " arrowBars：" + arrowBars);
      console.log(" Header：" + Header + " pagerH：" + pagerH);
      this.options.isMobile
        ? 0
        : (document.getElementsByClassName(`${targetClassName}`)[0].style.height =
            boxH - arrowBars - Header - Footer - tabOffT - pagerH);
      let height = boxH - arrowBars - Header - Footer - pagerH;
      return this.options.isIpad ? height + 30 : this.options.isAndroid ? height + 95 : height;
    },
    // 在el-table中添加
    // 设置表头行样式 :header-cell-style="tableHeaderColor"
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#F4F4F4;text-align:center";
    },
    //  设置表格行样式 :row-style="tableRowStyle"
    tableRowStyle({ row, rowIndex }) {
      return "font-size:25px; color:red;";
    },
    // 设置颜色 :row-class-name="tableRowClassName"
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    }
  }
};

export default mixin;
